import { createStore } from 'vuex'

const store = createStore({
    state(){
        return {
            theme: "dark" as string,
            database:['bing']as string[],
            apiKey:"" as string,
            fontSize:1,
            layout:{
                name: "desktop",
                content:{
                    span:4,
                    show:true
                },   
                sider:{
                    span:19,
                    show:true,
                    suffix:{
                        show: true
                    }
                },
                menu:{
                    span:16
                },
                config:{
                    span:8
                }
            }
        }
    },
    mutations:{
        update(state:{[key:string]:any},payload:{[key:string]:any}){
            for(let key of Object.keys(payload)){
                state[key] = payload[key]
            }
        },
        toMobileLayout(state){
            console.log("to mobile layout")
            state.layout = {
                name: "mobile",
                content:{
                    span:24,
                    show:true
                },   
                sider:{
                    span:24,
                    show:false,
                    suffix:{
                        show:true
                    }
                },
                menu:{
                    span:10
                },
                config:{
                    span:14
                }
            }
        },
        toDesktopLayout(state){
            console.log("to desktop layout")
            state.layout = {
                name: "desktop",
                content:{
                    span:19,
                    show:true
                },   
                sider:{
                    span:4,
                    show:true,
                    suffix:{
                        show:false
                    }
                },
                menu:{
                    span:20
                },
                config:{
                    span:4
                }
            }
        },
        siderShowTransform(state,payload){
            state.layout.sider.show = payload.show
        },
        contentShowTransform(state,payload){
            state.layout.content.show = payload.show
        },
    }
})

export { store }